<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
        * { box-sizing: border-box; }

        body { font-family: sans-serif; }

        .item {
          width: 100px;
          height: 100px;
          float: left;
          
          margin: 5px;
          padding: 5px;
        }

        .item p {
          margin: 0;
        }

        .red { background: #F33; }
        .blue { background: #88F; }
        .green { background: #3A3; }
        .orange { background: orange;}

        select, label, input { font-size: 20px; }

        label { margin-right: 10px; }
        </style>
    </head>
    <body>
        <div id="form-ui">
        <p>
          <label><input type="checkbox" value=".red" /> red</label>
          <label><input type="checkbox" value=".green" /> green</label>
          <label><input type="checkbox" value=".blue" /> blue</label>
          <label><input type="checkbox" value=".orange" /> orange</label>
        </p>

          <p id="output">--</p>
          
        </div>

        <div id="container">
          <!-- items added with JS -->
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script>
        // templating
        var colors = [ 'red', 'green', 'blue', 'orange' ];
        var sizes = [ 'small', 'medium', 'large' ];
        var prices = [ 10, 20, 30 ];

        createItems();

        // init Isotope
        var $container = $('#container').isotope({
          itemSelector: '.item'
        });

        var $output = $('#output');

        // filter with selects and checkboxes
        var $checkboxes = $('#form-ui input');

        $checkboxes.change( function() {
          // map input values to an array
          var inclusives = [];
          // inclusive filters from checkboxes
          $checkboxes.each( function( i, elem ) {
            // if checkbox, use value if checked
            if ( elem.checked ) {
              inclusives.push( elem.value );
            }
          });

          // combine inclusive filters
          var filterValue = inclusives.length ? inclusives.join(', ') : '*';

          $output.text( filterValue );
          $container.isotope({ filter: filterValue })
        });


        function createItems() {

          var $items;
          // loop over colors, sizes, prices
          // create one item for each
          for (  var i=0; i < colors.length; i++ ) {
            for ( var j=0; j < sizes.length; j++ ) {
              for ( var k=0; k < prices.length; k++ ) {
                var color = colors[i];
                var size = sizes[j];
                var price = prices[k];
                var $item = $('<div />', {
                  'class': 'item ' + color + ' ' + size + ' price' + price
                });
                $item.append( '<p>' + size + '</p><p>$' + price + '</p>');
                // add to items
                $items = $items ? $items.add( $item ) : $item;
              }
            } 
          }

          $items.appendTo( $('#container') );

        }
        </script>
    </body>
</html>